<template>
	<div class="footer" v-show="this.things.length>0">
		<input type="checkbox" id="checkbox" :checked="Allcheck" @click="choice">
		<!-- <input type="checkbox" id="checkbox" v-model="Allcheck">   该方法为计算属性get，set方法，想不出来 -->
		<span>已完成{{check}}</span> / 全部{{things.length}}
		<button @click="clearAll">删除已勾选</button>
	</div>
</template>

<script>
	export default {
		name:'MyFooter',
		props:['things'],
		data() {
			return {
				doneTotal:0
			}
		},
		methods: {
			//选择这个全部打√
			choice(e){
				for(let i=0;i<this.things.length;i++){
					this.things[i].done = e.target.checked;
				}
			},
			clearAll(){
				this.$emit('clearAll')
				
			}
		},
		computed:{
			check(){
				this.doneTotal = 0;
				for(let i=0;i<this.things.length;i++){
					if(this.things[i].done) {
						this.doneTotal++;
					}
				}
				return this.doneTotal
			},
			//全部选择以后变成对勾
			Allcheck(){
				if(this.doneTotal ==this.things.length&&this.things.length>0){
					return true
				}
			}

		}
	}
</script>

<style scoped>
	
</style>